<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>评价</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 引入样式 -->
    <link rel="icon" href="./../images/favico.ico">
    <link rel="stylesheet" href="../css/index.css">
    <style>
        .el-button {
            margin-top: 20px;
        }

        body {
            padding: 15px;
            background-color: #f7f7f7;
        }

        .main {
            padding: 20px;
            background-color: #fff;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
        }

        .top {
            display: flex;
            align-items: center;
        }

        .top img {
            display: block;
            width: 40px;
            height: 40px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
        }

        .top p {
            margin-left: 10px;
            font-size: 18px;
            color: #000;
            font-weight: 600;
        }

        .content {
            margin-top: 20px;
        }

        .item {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .item > span {
            margin-right: 10px;
            display: block;
            width: 36px;
            font-size: 14px;
            color: #999;
        }

        .item.first .el-rate__icon {
            font-size: 30px;
        }

        .el-rate {
            height: auto;
        }

        .el-rate__item {
            width: 36px;
            text-align: center;
        }

        .item.first > span {
            font-size: 18px;
            color: #333;
            font-weight: 600;
        }

        .content textarea {
            display: block;
            width: 100%;
            height: 100px;
            padding: 10px;
            border: 0;
            font-size: 14px;
            color: #000;
            resize: none;
            background-color: #f7f7f7;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        textarea:focus {
            border: 0;
            outline: none !important;
        }

    </style>

</head>
<body>
<div id="app">
    <div class="main">
        <div class="top">
            <img :src="details.photo" alt="">
            <p>{{details.name}}</p>
        </div>
        <div class="content">
            <div class="item first">
                <span>总体</span>
                <el-rate
                        v-model="detail.overall"
                        text-color="#ff9900"
                        show-text>
                </el-rate>
            </div>
            <div class="item">
                <span>口味</span>
                <el-rate
                        v-model="detail.taste"
                        show-text
                        text-color="#ff9900">
                </el-rate>
            </div>
            <div class="item">
                <span>包装</span>
                <el-rate
                        v-model="detail.pack"
                        show-text
                        text-color="#ff9900">
                </el-rate>
            </div>
            <div>
                <textarea placeholder="有什么建议吗？" v-model="detail.content"></textarea>
            </div>
        </div>

        <!--不要就删除，给你获取当前更改的一个数据-->
        <el-button type="primary" @click="getData(detail)">提交</el-button>
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../js/vue.min.js"></script>

<!-- 引入组件库 -->
<script src="../js/index.js"></script>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!--<script src="../../backend/plugins/vue/vue.js"></script>-->
<!-- 引入vant样式 -->
<script src="./../js/vant.min.js"></script>
<!-- 引入axios -->
<script src="../../backend/plugins/axios/axios.min.js"></script>

<script src="./../api/evaluate.js"></script>
<script src="./../js/request.js"></script>
<script src="./../js/common.js"></script>


<script>
    new Vue({
        el: '#app',
        data() {
            return {
                details:{
                    photo: './../images/favico.ico',
                    name: '菩提阁',
                },
                detail: {
                    content: '',
                    overall: 0,
                    taste: 0,
                    pack: 0,
                    orderId:undefined
                },
            }
        },
        created() {
            this.init ()
        },

        methods: {
            async init () {
                const params = parseUrl(window.location.search)
                this.detail.orderId = params.id
                queryDishById(this.detail.orderId).then(res => {
                    console.log(res)
                    if (String(res.code) === '1') {
                        this.detail = { ...res.data }
                    } else {
                        this.$message.success("请评价")
                    }
                })
            },
            getData(row) {
                const params = parseUrl(window.location.search)
                this.detail.orderId = params.id
                // console.log(this.detail, 1111, this.content);
                addEvaluate(row).then(res=>{
                    if(res.code === 1){
                        window.requestAnimationFrame(()=>{
                            window.location.href= '/front/page/order.html'
                        })
                    }else{
                        window.requestAnimationFrame(()=>{
                            this.$message.success("追评成功！")
                            window.location.href= '/front/page/order.html'
                        })
                    }
                })

            },
        }
    })



</script>

</body>
</html>